<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            display: flex;
            width: 800px;
            height: 410px;
            margin: 100px auto;
            align-items: center;
        }

        .icon {
            width: 600px;
            height: 410px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="wrap">
            <button @click="prev">上一页</button>
            <img class="icon" :src="imgs[i]" alt="">
            <button @click="next">下一页</button>
        </div>
    </div>
    <script src="./vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                imgs: [
                    'https://game.gtimg.cn/images/yxzj/img201606/heroimg/155/155-mobileskin-1.jpg',
                    'https://game.gtimg.cn/images/yxzj/img201606/heroimg/174/174-mobileskin-1.jpg',
                    'https://game.gtimg.cn/images/yxzj/img201606/heroimg/141/141-mobileskin-1.jpg',
                    'https://game.gtimg.cn/images/yxzj/img201606/heroimg/149/149-mobileskin-1.jpg',
                    'https://game.gtimg.cn/images/yxzj/img201606/heroimg/115/115-mobileskin-1.jpg'
                ],
                i: 0
            },
            methods: {
                prev () {
                    this.i--
                    if (this.i < 0) {
                        this.i = this.imgs.length - 1
                    }
                },
                next () {
                    this.i++
                    // 数组长度为5，下标到4，数组长度为7，下标到6
                    // 最大下标 = 长度 - 1
                    if (this.i >= this.imgs.length) {
                        this.i = 0
                    }
                }
            }
        })

    </script>
</body>

</html>